body {
    font: Arial,sans-serif;
}

#container {
    overflow: auto;
    margin: 0 auto;
}

#title {
    font-weight: bold;
    margin-bottom: 5px;
    color: #444444!important;
}
#detail {
    color: #666666!important;
}

@media only screen and (min-width: 320px) and (max-width: 480px){
    #container {
        width: 320px;
    }
    #detail {
        width: 320px;
        text-align: center;
        margin-bottom: 10px;
    }
    #player-container {
        width: 320px;
    }
    #player {
        width: 320px;
        height: 320px;
    }
    #title {
        font-size: 1.6em;
    }

    #description {
        padding: 10px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 640px) {
    #container {
        width: 480px;
    }
    #detail {
        width: 480px;
        text-align: center;
        margin-bottom: 10px;
    }
    #player-container {
        width: 480px;
    }
    #player {
        width: 480px;
        height: 480px;
    }
    #title {
        font-size: 1.7em;
    }

    #description {
        padding: 10px;
    }
}

@media only screen and (min-width: 640px) and (max-width: 1040px) {
    #description {
        padding: 10px;
    }
    #container {
        width: 640px;
    }
    #detail {
        width: 640px;
        margin-bottom: 10px;
        text-align: center;
    }
    #player-container {
        margin-top: 5px;
        width: 640px;
    }
    #title {
        font-size: 1.8em;
    }
}

@media only screen and (min-width: 1040px) {
    #container {
        width: 1040px;
    }
    #detail {
        width: 380px;
        float: left;
        margin: 5px;
    }
    #player-container {
        width: 640px;
        float: right;
        margin: 5px;
    }
    #title {
        font-size: 1.9em;
    }
}